<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="./js/axios.min.js"></script>
    <style>

        .main{
            width: 1000px;
            margin: auto;
        }
        .myTable {
            border: 1px #000 solid;
            width: 900px;
        }
        th,td{
            border: 1px #000 solid;
            text-align: center;
        }
        .status{
            width: 50px;
            text-align: center;
        }
        a{
            text-decoration: none;
        }
        a:visited{
            color: blue;
        }
        a:hover{
            color: #f00;
        }
        a:active{
            color: blue;
        }
        .add{
            margin-right: 20px;
        }
        .searchByStatus{
            width: 150px;
            height: 23px;
            text-align: center;
        }
        form {
            margin: 20px;
        }
        form label{
            margin-left: 20px;
        }
        .search{
            margin-left: 20px;
        }
        td select{
            width: 40px;
            height: 20px;
            text-align: center;

        }
    </style>
</head>
<body>
    <div class="main">
        <form action="#" method="get" >
            <span ><a href="./add.html" class="add" id="add">新增</a></span>
            <label for="searchByName">名称：<input type="search" id="searchByName" name="searchByName"></label>

            <label for="searchByType">类别：<input type="search" id="searchByType" name="searchByType"></label>

            <label for="searchByStatus">状态：
                <select id="searchByStatus" name="searchByStatus" class="searchByStatus">
                    <option>—请选择状态—</option>
                    <option value="0">——启用——</option>
                    <option value="1">——停用——</option>
                </select>
            </label>
            <button class="search" id="search">搜索</button>
        </form>
        <table class="myTable" id="dataTable"  >
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>类别</th>
                <th>排序</th>
                <th>描述</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>金骏眉</td>
                <td>红茶</td>
                <td>100</td>
                <td>描述</td>
                <td>
                    <select id="status" name="status" class="status">
                        <option value="1">停用</option>
                        <option value="0">启用</option>
                    </select>
                </td>
                <td>
                    <a href="./update.html">修改</a>
                    <a href="#" onclick="deleteById(1)">删除</a>
                </td>
            </tr>
        </table>
    </div>
    <script>
        /*页面加载成功后，执行的函数*/
        window.onload=function () {
            /*该函数里调用其他函数*/
            queryAll();
        }



        function queryAll() {
            axios({
                method:"get",
                url:"/JMS2301_01_Mybatis_war/tea/queryAllServlet"
            }).then(function (resp) {
                let teas=resp.data;
                let tableData="<tr>\n" +
                    "                <th>序号</th>\n" +
                    "                <th>名称</th>\n" +
                    "                <th>类别</th>\n" +
                    "                <th>排序</th>\n" +
                    "                <th>描述</th>\n" +
                    "                <th>状态</th>\n" +
                    "                <th>操作</th>\n" +
                    "            </tr>";
                for (let i = 0; i < teas.length; i++) {
                    tableData+='<tr>\n' +
                        "                <td>"+(i+1)+"</td>\n" +
                        "                <td>"+teas[i].teaName+"</td>\n" +
                        "                <td>"+teas[i].teaTypeId+"</td>\n" +
                        "                <td>"+teas[i].ordered+"</td>\n" +
                        "                <td>"+teas[i].description+"</td>\n" +
                        "                <td>\n"+(teas[i].status=='1'?"启用":"停用")+"</td>\n" +
                        "                <td>\n" +
                        "                    <a href=\"./update.html\">修改</a>\n" +
                        "                    <a href='/JMS2301_01_Mybatis_war/tea/remove?id="+teas[i].id+"'>删除</a>\n" +
                        "                </td>\n" +
                        "            </tr>";
                    //调用展示状态的方法

                }
                document.getElementById("dataTable").innerHTML=tableData;
            })
        }
        

        function deleteById(id) {
            var flag= confirm("确实删除？"+id);
            if (flag){
                //想后端发送请求，调用删除的那个Servlet
                axios.get({
                    url:"/JMS2301_01_Mybatis_war/tea/remove?id="+id
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if (resp.data == "success") {
                        location.href = "./index.html";
                    }
                })
            }
        }

        function updateStatus(){

        }
    </script>
</body>
</html>